@keyframes mirrorX1 {
  from {
	transform: rotateX(0deg);
  }
  to {
	transform: rotateX(360deg);
  }
}
@-webkit-keyframes mirrorX1 {
  from {
	-webkit-transform: rotateX(0deg);
  }
  to {
	-webkit-transform: rotateX(360deg);
  }
}
@keyframes mirrorY1 {
  from {
	transform: rotateY(0deg);
  }
  to {
	transform: rotateY(360deg);
  }
}
@-webkit-keyframes mirrorY1 {
  from {
	-webkit-transform: rotateY(0deg);
  }
  to {
	-webkit-transform: rotateY(360deg);
  }
}
@keyframes mirrorX2 {
  from {
	transform: rotateX(0deg);
  }
  50% {
	transform: rotateX(360deg);
  }
  to {
	transform: rotateX(720deg);
  }
}
@-webkit-keyframes mirrorX2 {
  from {
	-webkit-transform: rotateX(0deg);
  }
  50% {
	-webkit-transform: rotateX(360deg);
  }
  to {
	-webkit-transform: rotateX(720deg);
  }
}
@keyframes mirrorY2 {
  from {
	transform: rotateY(0deg);
  }
  50% {
	transform: rotateY(360deg);
  }
  to {
	transform: rotateY(720deg);
  }
}
@-webkit-keyframes mirrorY2 {
  from {
	-webkit-transform: rotateY(0deg);
  }
  50% {
	-webkit-transform: rotateY(360deg);
  }
  to {
	-webkit-transform: rotateY(720deg);
  }
}
@keyframes mirrorXY {
  from {
	transform: rotateX(0deg) rotateY(0deg);
  }
  to {
	transform: rotateX(360deg) rotateY(360deg);
  }
}
@-webkit-keyframes mirrorXY {
  from {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to {
	-webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}
@keyframes mirrorXY2 {
  from {
	transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
	transform: rotateX(360deg) rotateY(0deg);
  }
  to {
	transform: rotateX(0deg) rotateY(360deg);
  }
}
@-webkit-keyframes mirrorXY2 {
  from {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
	-webkit-transform: rotateX(360deg) rotateY(0deg);
  }
  to {
	-webkit-transform: rotateX(0deg) rotateY(360deg);
  }
}

@keyframes flipOutXRainbow {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
	background-color : lightblue;    
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -40deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -40deg);
    opacity: 1;
	background-color : lightpink;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@-webkit-keyframes flipOutXRainbow {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
	background-color : lightblue;    
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -40deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -40deg);
    opacity: 1;
	background-color : lightpink;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

 @keyframes rotateRound0 {
  from {
  }
  30% {
	transform: rotate(360deg);
	border-radius: 100px;
	background-color : blue;
  }
  70% {
	transform: rotate(-360deg);
	border-radius: 100px;
	background-color : red;
  }
  to {
	border-radius: 0px;
  }
}
 @-webkit-keyframes rotateRound0 {
  from {
  }
  30% {
	-webkit-transform: rotate(360deg);
	border-radius: 100px;
	background-color : blue;
  }
  70% {
	-webkit-transform: rotate(-360deg);
	border-radius: 100px;
	background-color : red;
  }
  to {
	border-radius: 0px;
  }
}
@keyframes rotateRound1 {
  from {
	transform: rotate(360deg);
  }
  to {
  }
}
@-webkit-keyframes rotateRound1 {
  from {
	-webkit-transform: rotate(360deg);
  }
  to {
  }
}
@keyframes rotateRound {
  from {
  }
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
	background-color : red;
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@-webkit-keyframes rotateRound {
  from {
  }
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    -webkit-transform: translate3d(20px, 0, 0);
	background-color : red;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    -webkit-transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes rainbow {
  from {
  }
  20% {
	-webkit-transform: rotate(80deg);
	-webkit-transform: rotate(80deg);
	-webkit-transform: rotate(80deg);
	transform: rotate(80deg);
	border-radius: 20px;
	background-color : blue;
  }
  40% {
	-webkit-transform: rotate(160deg);
	-webkit-transform: rotate(160deg);
	-webkit-transform: rotate(160deg);
	transform: rotate(160deg);
	border-radius: 40px;
	background-color : green;
  }
  60% {
	-webkit-transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	transform: rotate(240deg);
	border-radius: 60px;
	background-color : yellow;
  }
  80% {
	-webkit-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	border-radius: 80px;
	background-color : red;
  }
  to {
	border-radius: 0px;
  }
}
@-webkit-keyframes rainbow {
  from {
  }
  20% {
	-webkit-transform: rotate(80deg);
	-webkit-transform: rotate(80deg);
	-webkit-transform: rotate(80deg);
	transform: rotate(80deg);
	border-radius: 20px;
	background-color : blue;
  }
  40% {
	-webkit-transform: rotate(160deg);
	-webkit-transform: rotate(160deg);
	-webkit-transform: rotate(160deg);
	transform: rotate(160deg);
	border-radius: 40px;
	background-color : green;
  }
  60% {
	-webkit-transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	transform: rotate(240deg);
	border-radius: 60px;
	background-color : yellow;
  }
  80% {
	-webkit-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	border-radius: 80px;
	background-color : red;
  }
  to {
	border-radius: 0px;
  }
}
